<style scoped lang='less'>
    .user-client-bg {
        /*position: fixed;*/
        /*top: 100px;*/
        /*bottom: 0;*/
        /*left: 0;*/
        /*right: 0;*/
        /*background: white;*/
        font-size: 14px;
        .detial-content {
            margin: 0 auto;
            width: 600px;
            padding: 50px;
            max-height: 700px;
            border: 7px solid #dbdbdb;
            overflow: scroll;
            /*border: 1px solid #838383;*/
        }
        .ivu-form-item-content {
            border-bottom: 1px solid #aaaaaa !important;
        }
    }

    .demo-upload-list {
        /*display: inline-block;*/
        /*width: 95px;*/
        margin-bottom: 40px;
        height: 133px;
        text-align: center;
        line-height: 60px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        /*box-shadow: 0 1px 1px rgba(0, 0, 0, .2);*/
        margin-right: 4px;
    }

    .demo-upload-list img {
        width: 100%;
        height: 100%;
    }

    .demo-upload-list-cover {
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, .6);
    }

    .demo-upload-list:hover .demo-upload-list-cover {
        display: block;
    }

    .demo-upload-list-cover i {
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
</style>
<template>
    <div class="user-client-bg">
        <div class="detial-content">
            <i-form>
                <!--上传图片-->
                <Form-item label="" prop="image">
                <div class="demo-upload-list">
                    <img :src="image" style=" width: 95px;height: 133px" @click="handleView(image)">
                </div>
                </Form-item>
                <Modal title="查看图片" v-model="visible">
                    <img :src="seeImg" v-if="visible" style="width: 100%">
                </Modal>
                <Form-item style="border-bottom: 1px solid #aaaaaa" label="姓名：" prop="Personalname">
                    <span>{{formValidate.Personalname}}</span>
                </Form-item>
                <Form-item style="border-bottom: 1px solid #aaaaaa" label="性别：">
                    <span>{{formValidate.Sex}}</span>
                </Form-item>
                <Form-item style="border-bottom: 1px solid #aaaaaa" label="职务：">
                    <span>{{formValidate.Duty}}</span>
                </Form-item>
                <Form-item style="border-bottom: 1px solid #aaaaaa" label="部门：">
                    <span>{{formValidate.Unit}}</span>
                </Form-item>
                <Form-item style="border-bottom: 1px solid #aaaaaa" label="单位：">
                    <span>{{formValidate.Department}}</span>
                </Form-item>
                <Form-item v-if="formValidate.Cardid" style="border-bottom: 1px solid #aaaaaa" label="一卡通：">
                    <span>{{formValidate.Cardid}}</span>
                </Form-item>
                <Form-item v-if="formValidate.Joindate" style="border-bottom: 1px solid #aaaaaa" label="入伍时间：">
                    <span>{{formValidate.Joindate}}</span>
                </Form-item>
                <template v-for="(item,index) in dataModel">
                    <Form-item v-if="item.Value" style="border-bottom: 1px solid #aaaaaa" :label="item.Value + '：'">
                        <span>{{item.Extvalue}}</span>
                    </Form-item>
                </template>
            </i-form>
            <i-button @click="jumpPage('','UserList')" type="primary" style="margin-left: 8px">返回</i-button>
        </div>

    </div>
</template>
<script>
    import apiUtil from '../../../assets/utils/api_util';

    export default {
        data() {
            return {
                formValidate: {},
                image: '',
                visible: false,
                dataModel: [],
                seeImg: '',
                apiUtilBase: apiUtil.urls.baseUrl,
            }
        },
        mounted: function () {

            // let id = this.$route.query.id;
            this.getDetail()
        },

        methods: {
            //跳转
            jumpPage: function (id, url) {
                //跳转
                let route = '';
                if (id > 0) {
                    route = {
                        path: url,
                        query: {
                            id: id
                        },
                    };
                } else {
                    route = {
                        path: url,
                    };
                }

                this.$router.push(route);
            },
            //预览上传图片
            handleView(url) {
                this.seeImg = url;
                this.visible = true;
            },
            getListAllUserExt: function (data) {
                let that = this;
                let para = {};
                this.$Loading.start();

                apiUtil.get(that, apiUtil.urls.ListAllUserExt, para, function (res) {
                    that.$Loading.finish();
                    res.Msg.forEach(function (item, index) {
                        let itemArr = {};
                        data.forEach(function (item2, index2) {
                            if (item.Keyname == item2.Extkey) {
                                itemArr.Keyname = item.Keyname;
                                itemArr.Value = item.Value;
                                itemArr.Extvalue = item2.Extvalue;
                            }
                        });
                        that.dataModel.push(itemArr);
                    });
                });
            },
            //详情
            getDetail: function () {
                let that = this;
                that.$Loading.start();

                let para = {
                    id: that.$route.query.id,
                };

                let params = that.$qs.stringify(para);
                apiUtil.get(that, apiUtil.urls.userClientDetail, para, function (res) {
                    that.$Loading.finish();
                    that.formValidate.Personalname = res.Msg.Displayname;
                    that.formValidate.Sex = res.Msg.Sex;
                    that.formValidate.Duty = res.Msg.Duty;
                    that.formValidate.Unit = res.Msg.Unit.Title;
                    that.image = that.apiUtilBase + res.Msg.Photo;
                    that.formValidate.Department = res.Msg.Part.Title;
                    if (res.Msg.Cardid) {
                        that.formValidate.Cardid = res.Msg.Cardid;
                    }
                    if (res.Msg.Joindate) {
                        that.formValidate.Joindate = res.Msg.Joindate;
                    }

                    if (res.Msg.ExtInfo && res.Msg.ExtInfo.length > 0) {
                        that.getListAllUserExt(res.Msg.ExtInfo);
                    }
                });
            },


        }
    }
</script>
